import React, { useEffect, useState } from 'react'

export default function UseEffect() {
    const [msg,setMsg] = useState('nihoa ,shijie')
    // 声明周期  挂载后  更新后  卸载前
    // useEffect(callback,[依赖项])
    useEffect(() => {
        const timer = setInterval(()=> console.log('定时器'),2000)
        console.log('使用useEffect模拟挂载后的声明周期');
        return () => {
            // 清除定时器
            clearInterval(timer)
            console.log('使用useEffect模拟卸载前的声明周期1');
        }
    })
    useEffect(()=>{
        // 给useEffect传入第二个参数，第二个参数是一个数组，数组里是要监听的数据变量名
        console.log('使用useEffect模拟更新后的声明周期2');
    },[msg])
  return (
    <div>
        <h1>{msg}</h1>
        <button onClick={()=>setMsg('你好世界')}>改名</button>
    </div>
  )
}
